import './index.scss'
import { DotLoading } from 'antd-mobile'
import { useProbDetail } from './useProbDetail'
import ArticleCard from '@/components/ArticleCard'
import Form from '@/components/Form'
import Bread from '@/components/Bread'

type Item  = 
{
    id?: number;
    title?: string;
    link:string;
    classname?: string
}

const shortText = (value:string) => {
  if (value.length > 22) {
      return value.slice(0, 22) + '...';
  }
  return value
}
const Solution = () => {
    // 逻辑业务
    const { detailData, isLoading } = useProbDetail()
    const breadNav: Item[] = [
      { id: 1, title: 'Service', link: '/support', classname: '' },
      { id: 2, title: detailData?.category2_name, link: `/problem/`, classname: '' },
      { id: 2, title: shortText(detailData?.title||''), link: `/problem/`, classname: 'active' },
    ]
    // UI 渲染
    return (
      <div>
        {isLoading ? <div className='content-box'><span>Loading</span><DotLoading /></div> : 
          <div>
            <div className='content-box'>
              <Bread items={breadNav}/>
              <ArticleCard 
                title={detailData.title} 
                content={detailData.content}
                classname='article-panel'
              />
            </div>
            <Form />
          </div>
        }
      </div>
    )
  }
  
  export default Solution
  